package myJs.cps.myTable

import japgolly.scalajs.react.ScalaFnComponent
import japgolly.scalajs.react.vdom.all._
import myJs.tool.Pojo._

import scala.collection.immutable.SeqMap
import myJs.Implicits._
import myJs.cps.BootstrapTableCp.Column
import myJs.myPkg.i18n.ReactI18next

import scala.scalajs.js
import cats.effect._
import japgolly.scalajs.react.util.EffectCatsEffect._

object SortConditionCp {

  case class Props(
      fieldColumnMap: SeqMap[String, Column],
      sortField: String,
      order: String,
      removeSort: SyncIO[Unit]
  ) {
    @inline def render: VdomElement = {
      Component(this)
    }
  }

  val Component = ScalaFnComponent[Props] { props =>
    val t = ReactI18next.useT

    object FTool {

      def removeSort = {
        props.removeSort
      }

    }

    val sortField = props.sortField
    val order = props.order
    val orderE = order match {
      case "asc" => span(color.red, "Ascending sort")()
      case "desc" => span(color.blue, "Descending sort")()
      case "" => span()()
    }
    if (sortField.nonBlank) {
      div(
        marginBottom := 10.px,
        s"${t("sortingConditions")}: ",
        span(
          id := "sortCondition",
          span(
            className := "eachFCParent",
            span(
              className := "eachFilterCondition", {
                span(s"${props.fieldColumnMap(sortField).title} , ")
              },
              orderE
            ),
            sup(
              className := "mySup sortSub myRemoveSort",
              onClick --> FTool.removeSort,
              i(className := "fa fa-times-circle")
            )
          )
        )
      )
    } else EmptyVdom

  }

}
